<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>差看所有员工上班时间</title>

    <!--data table-->
    <link rel="stylesheet" href="js/data-tables/DT_bootstrap.css" />

    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet">
</head>


<body class="sticky-header">

<section>
    <div th:replace="commons :: #left"></div>
    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div th:replace="commons :: #search"></div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                考勤情况
            </h3>
        </div>
        <!-- page heading end-->
        <div>

            <span>
				<span id="year">2021</span>
				<span id="month">01</span>
			</span>
            <select id="month_choose" onchange="option_change(this.options[this.options.selectedIndex].value)">
            <select/>
            <input  id="input_day" type="date" onchange="select_day(this.value)"/>

                    <!--<input type="button" value="一月" onclick="optionChange(1)"/>-->
        </div>
        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            <span class="tools pull-right">
                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                        <a href="javascript:;" class="fa fa-times"></a>
                     </span>
                        </header>
                        <div class="panel-body">
                            <div class="adv-table editable-table ">
                                <div class="clearfix">
                                </div>
                                <div class="space15" id="before_table"></div>
                                <div id="mytable"></div>

                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer>
            2020 &copy; AdminEx by ThemeBucket </a>
        </footer>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>

<!--data table-->
<script type="text/javascript" src="js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>

<!--common scripts for all pages-->
<script src="js/scripts.js"></script>

<!--script for editable table-->
<script src="js/editable-table.js"></script>

<!-- END JAVASCRIPTS -->
<script th:inline="javascript">
    var months=["","一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
    var year = $("#year").text();

    //重置obj的value
    function init_input_day(obj) {
        obj.attr("value","");
    }

    function select_day(obj) {
        $.ajax({
            url:"/research_by_day",
            data:{work_date:obj},
            success:function (data) {
                //obj 表示要渲染的位置 date为数据源
                init_table($("#mytable"),data);

                $("#month_choose").find("option[value = '0']").attr("selected","selected");
            },
            error:function () {
                console.log("错误！");
            }
        })
    }

    function option_change(obj) {
        $.ajax({
            url:"/research_by_month_or_name_or_id",
            data:{month:obj},
            success:function (data) {
                // obj1对应id为year的span obj2 对应id为month的span，obj3对应要动态加载数据的select
                initTime($("#year"),$("#month"),$("#month_choose"),parseInt(year),parseInt(obj));

                //重置input_day的value
                init_input_day($("#input_day"));
                //obj 表示要渲染的位置 date为数据源
                init_table($("#mytable"),data);
            },
            error:function () {
                console.log("错误！");
            }
        })
    }


    //表格初始化
    function init_table(obj,date){

        var table="<table class='table table-striped table-hover table-bordered' id='editable-sample'>";
        var thead="<thead>\n" +
        "                                    <tr>\n" +
        "                                        <th>员工编号</th>\n" +
        "                                        <th>员工姓名</th>\n" +
        "                                        <th>日期</th>\n" +
        "                                        <th>上班时间</th>\n" +
        "                                        <th>下班时间</th>\n" +
        "                                        <th>备注</th>\n" +
        "                                        <th>是否迟到</th>\n" +
        "                                        <th>是否请假</th>\n" +
        "                                    </tr>\n" +
        "                                    </thead>";
        table+=thead;

        table+="<tbody>";
        for (var i = 0; i <date.length; i++) {
            var tr="<tr align='center'>";
                tr+="<td>"+date[i].eid+"</td>";
                tr+="<td>"+date[i].ename+"</td>";
                tr+="<td>"+date[i].workDate+"</td>";
                tr+="<td>"+date[i].workStart+"</td>"
                tr+="<td>"+date[i].workEnd+"</td>";
                tr+="<td>"+date[i].mark+"</td>";
                if(date[i].isLater==1)tr+="<td><span style='color: red'>是</span></td>";
                else tr+="<td><span style='color: green'>没有</span></td>";

                if(date[i].isLeave==1)tr+="<td><span style='color: red'>是</span></td>";
                else tr+="<td><span style='color: green'>没有</span></td>";

            tr+="</tr>";
            table+=tr;
        }
        table+="</tbody>";
        table+="</table>"
        obj.html(table);
    }

    //初始化月份select
    function initTime(obj1,obj2,obj3,year,month) {
        obj1.text(year+"年");
        obj2.text(month+"月");
        var select="<select>";
        select+="<option  value='0'>请选择</option>";
        for (var i = 1; i <months.length; i++) {
            if(month==i){
                select+="<option value='"+i+"' selected>"+months[i]+"</option>";
            }else select+="<option value='"+i+"'>"+months[i]+"</option>";
        }
        select+="</select>";
        obj3.html(select);
    }


    jQuery(document).ready(function() {
        //初始化数据
        var init_list=[[${list}]];
        console.log(init_list);
        var init_time=new Date();
        var init_month=parseInt(init_time.getMonth());
        var init_year=parseInt(init_time.getFullYear());

        console.log(init_list);
        initTime($("#year"),$("#month"),$("#month_choose"),init_year,init_month+1);
        init_table($("#mytable"),init_list);
        EditableTable.init();
    });
</script>

</body>
</html>
